<template>
	<!-- <view class="page"> -->
	<view class="page" :style="{'height':h+'px','padding-top':mt+'px'}">
		<c-nav-bar title="选择航线"></c-nav-bar>
		<view class="details">
			<view class="place_box">
				<text class="pb_title">出发地点</text>
				<view class="pb_items">
					<view v-for="(item,index) in departList" :key="index" :class="didx===index?'active':''"
						@tap="selectDepart(item,index)">
						{{item.portName||item.startPortName}}
						<image src="https://i.ringzle.com/file/20240220/0c5774b5a8484d07a032e0e806fc7feb.png"
							v-if="didx===index"></image>
					</view>
				</view>
			</view>
			<view class="place_box pbl">
				<text class="pb_title">到达地点</text>
				<view class="pb_items">
					<view v-for="(item,index) in arriveList" :key="index" :class="aidx===index?'active':''"
						@tap="selectArrive(item,index)">
						{{item.portName||item.endPortName}}
						<image src="https://i.ringzle.com/file/20240220/0c5774b5a8484d07a032e0e806fc7feb.png"
							v-if="aidx===index"></image>
					</view>
				</view>
			</view>
			<view class="hn_tip" v-if="isHn">花鸟岛入岛需购买门票，船票购买成功后建议您提前购买入岛门票</view>
		</view>
		<view class="d_sure" @tap="toSurePlace">确定</view>
	</view>
</template>

<script>
	export default {
		name: 'selectShipRoute',
		data() {
			return {
				h: uni.getSystemInfoSync().windowHeight - 68,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				type: '',
				departurePlace: '',
				departureCode: '',
				arrivalPlace: '',
				arrivalCode: '',
				departList: [],
				arriveList: [],
				departListClone: [],
				arriveListClone: [],
				didx: '',
				aidx: '',
				isHn: false ,//是否选中花鸟岛,
				sortArr:['虹桥','南浦','长途南站','沈家湾','泗礁','五龙','黄龙','枸杞','嵊山','大洋','花鸟'],
				startAndEndLine:null,
				endAndStartLine:null
			}
		},
		onReady() {
			this.getPlaceList();
		},
		onLoad(option) {
			if (option.type) this.type = option.type;
		},
		methods: {
			// 获取出发/到达点数据
			getPlaceList() {
				this.$api.get('/api/travel/isshipportline/api/shipListAll').then(res => {
					if (res.data.code === 0) {
						if (!res.data.data) return;
						this.startAndEndLine = res.data.data.startAndEndLine;
						this.endAndStartLine = res.data.data.endAndStartLine;
						
						let temp = res.data.data.startLine;
						temp.forEach(t=>{
							let idx = this.sortArr.findIndex(s=>t.portName.indexOf(s)>-1);
							if(idx>-1) t.sort = idx;
							else t.sort = 999;
						})
						this.departList = temp.sort((a,b)=>a.sort-b.sort);
						this.departListClone = temp.sort((a,b)=>a.sort-b.sort);
						this.arriveList = res.data.data.endLine;
						this.arriveListClone = res.data.data.endLine;
					} else this.$showModal(res.data.msg)
				})
			},
			selectDepart(item, index) {
				if(this.didx!==index){
					this.didx = index;
					this.departurePlace = item.portName||item.startPortName;
					this.departureCode = item.portNum||item.startPortNum;
					if(this.aidx==='') this.arriveList = this.startAndEndLine[item.portName||item.startPortName];
				}else{
					this.didx = '';
					this.departurePlace = '';
					this.departureCode = '';
					if(this.aidx==='') this.arriveList = this.arriveListClone;
				}
			},
			selectArrive(item, index) {
				if(this.aidx!==index){
					this.aidx = index;
					this.arrivalPlace = item.portName||item.endPortName;
					this.arrivalCode = item.portNum||item.endPortNum;
					if(this.didx==='') this.departList = this.endAndStartLine[item.portName||item.endPortName];
					
					if (this.arrivalPlace.indexOf('花鸟') > -1) this.isHn = true;
					else this.isHn = false;
				}else{
					this.aidx = '';
					this.arrivalPlace = '';
					this.arrivalCode = '';
					this.isHn = false;
					if(this.didx==='') this.departList = this.departListClone;
				}
			},
			toSurePlace() {
				if(!this.arrivalPlace||!this.departurePlace) return this.$showToast('请选择出发地点和到达地点');
				
				this.getOpenerEventChannel().emit('selectedShip', {
					from: this.type == 2 ? this.arrivalPlace : this.departurePlace,
					to: this.type == 2 ? this.departurePlace : this.arrivalPlace,
					fromCode: this.type == 2 ? this.arrivalCode : this.departureCode,
					toCode: this.type == 2 ? this.departureCode : this.arrivalCode
				});
				uni.navigateBack();
			}
		}
	}
</script>

<style scoped lang="less">
	.page {
		padding-bottom: 20rpx;
		box-sizing: border-box;
		overflow-y: auto;

		.content {
			display: flex;

			.navs {
				width: 200rpx;
				display: flex;
				flex-direction: column;

				view {
					width: 100%;
					height: 108rpx;
					background: #F5F8FA;
					line-height: 108rpx;
					text-align: center;
					box-shadow: inset 0rpx -2rpx 0rpx 0rpx #EDEDED;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #777777;

					&.active {
						background: #FFFFFF;
						font-family: PingFang-SC-Bold, PingFang-SC;
						font-weight: bold;
						color: #007A69;
					}
				}
			}

			.items {
				width: calc(100% - 200rpx);
				padding: 20rpx;

				.hot {
					&>text {
						font-size: 24rpx;
						font-family: PingFang-SC-Bold, PingFang-SC;
						font-weight: bold;
						color: #111111;
						line-height: 33rpx;
					}

					.h_ships {
						display: flex;
						align-items: center;
						flex-wrap: wrap;

						&>view {
							width: 100%;
							height: 56rpx;
							background: #F5F8FA;
							border-radius: 4rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 24rpx;
							font-family: PingFang-SC-Bold, PingFang-SC;
							font-weight: bold;
							color: #111111;
							margin-top: 21rpx;

							span {
								margin: 0 15rpx;
							}
						}
					}
				}

				.ships {
					&>view {
						text-indent: 17rpx;
						margin-top: 48rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #111111;
						line-height: 33rpx;
					}
				}
			}
		}

		.details {
			padding: 0 24rpx;

			.d_items {
				height: 100rpx;
				background: #F5F8FA;
				border-radius: 16rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 20rpx;
				margin-top: 20rpx;

				.di_title {
					font-size: 30rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}

				.di_jj {
					display: flex;
					align-items: center;

					image {
						width: 44rpx;
						height: 44rpx;
					}

					.dij_num {
						width: 77rpx;
						height: 44rpx;
						line-height: 44rpx;
						text-align: center;
						font-size: 28rpx;
						font-family: PingFang-SC-Bold, PingFang-SC;
						font-weight: bold;
						color: #333333;
					}
				}
			}

			.place_box {
				padding-top: 36rpx;

				&.pbl {
					padding-top: 64rpx;
					border-top: none;
				}

				.pb_title {
					font-size: 32rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #333333;
				}

				.pb_items {
					overflow: auto;
					margin-top: 40rpx;
					margin-left: -18rpx;

					&>view {
						float: left;
						margin: 0 0 20rpx 18rpx;
						width: calc(100% / 3 - 18rpx);
						box-sizing: border-box;
						height: 80rpx;
						background: #FFFFFF;
						border-radius: 16rpx;
						border: 2rpx solid #EFEFEF;
						line-height: 80rpx;
						text-align: center;
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						position: relative;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;

						&.active {
							border: 2rpx solid #007A69;
							color: #007A69;
							background: rgba(0,122,105,0.06);
						}

						image {
							width: 34rpx;
							height: 26rpx;
							position: absolute;
							right: 0;
							bottom: 0;
						}
					}
				}
			}
		}

		.hn_tip {
			width: calc(100% + 48rpx);
			margin-left: -24rpx;
			background: #FFF3E8;
			padding: 15rpx 27rpx;
			box-sizing: border-box;
			font-size: 24rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #FF7D01;
			line-height: 36rpx;
			margin-top: 8rpx;
		}

		.d_sure {
			width: calc(100% - 48rpx);
			height: 88rpx;
			background: #007A69;
			border-radius: 44rpx;
			position: fixed;
			bottom: 48rpx;
			left: 24rpx;
			line-height: 88rpx;
			text-align: center;
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			letter-spacing: 2rpx;
		}
	}
</style>